<template>
  <div class="setting-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <crumbs>个人设置</crumbs>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form ref="settingForm" :model="reqParams" label-width="100px">
            <el-form-item label="编号：">
              {{ 1 }}
            </el-form-item>
            <el-form-item label="手机号：">
              {{ 123232 }}
            </el-form-item>
            <el-form-item label="媒体名称：">
              <el-input v-model="reqParams.name" placeholder="请输入媒体名称"></el-input>
            </el-form-item>
            <el-form-item label="媒体介绍：">
               <el-input type="textarea" v-model="reqParams.intro" placeholder="请输入媒体介绍"></el-input>
            </el-form-item>
            <el-form-item label="邮箱：">
              <el-input v-model="reqParams.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="editUser" >保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-upload
            class="avatar-uploader"
            action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
            :http-request="axiosRequest"
            :show-file-list="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div style="  text-align: center;">
            <p style="font-size: 12px;">修改头像</p>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
// 导入事件总线
import eventBus from '@/components/eventBus'
// 用户接口
import { userInfo, edit, editUserImg } from '@/api/user'
export default {
  name: 'Setting',
  data () {
    return {
      reqParams: {
        name: null,
        intro: null,
        email: null
      },
      imageUrl: ''
    }
  },
  mounted () {
    this.getUserInfo()
  },
  methods: {
    // 获取用户资料
    async getUserInfo () {
      const { data: { data } } = await userInfo()
      // console.log(data)
      this.reqParams = data
      this.imageUrl = data.photo
    },
    // 编辑用户资料
    async editUser () {
      try {
        const { data: { data } } = await edit(this.reqParams)
        // console.log(res)
        this.$message.success('编辑用户资料成功!')
        eventBus.$emit('inform-user', data)
      } catch (e) {
        this.$message.error('编辑用户资料失败!')
      }
    },
    // 因为elementUi上传组件默认是 POST ，而编辑头像请求方式是 PATCH 所以使用 http-request来设置请求方式
    async axiosRequest (result) {
      // 1. 获取file对象  result.file
      // 2. 包装成formdata
      const fd = new FormData()
      fd.append('photo', result.file)
      // 3. 通过axios进行提交
      const { data: { data } } = await editUserImg(fd)

      this.imageUrl = data.photo
      this.$message.success('编辑头像成功！')
      // 触发方法并传递值
      eventBus.$emit('inform-img', data)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
